<template>
  <div class="app-container">
    <div v-if="true" class="search">
      <el-row>
        <el-col :span="24">
          <div class="search-content">
            <el-form ref="search" :model="search" inline label-width="100px">
              <div class="line-one">
                <el-form-item label="标签名称">
                  <el-input v-model="name" placeholder="组合标签名称" style="width: 200px" />
                </el-form-item>
              </div>
              <div>
                <el-form-item label="创建日期">
                  <el-date-picker
                    v-model="createStartDate"
                    type="date"
                    placeholder="开始时间"
                    value-format="yyyy-MM-dd"
                    style="width: 200px"
                  />
                  <span class="gap">至</span>
                  <el-date-picker
                    v-model="createEndDate"
                    type="date"
                    placeholder="结束时间"
                    value-format="yyyy-MM-dd"
                    style="width: 200px"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" style="margin-left: 10px" @click="handleSearch">搜索</el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="list-wrapper">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="4">
          <div class="grid-content title">组合标签列表</div>
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple">
            <el-button type="primary" style="float: right;" @click="handleAdd">新增</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table
        v-loading="labelListLoading"
        :data="combinationLabelList"
        border
        style="width: 100%;margin-top: 20px;"
      >
        <el-table-column
          prop="id"
          label="编号"
          width="100"
        />
        <el-table-column
          prop="creater"
          label="创建人"
        />
        <el-table-column
          prop="labelId"
          label="标签编号"
        />
        <el-table-column
          prop="name"
          label="标签名称"
        />
        <el-table-column
          prop="createDate"
          label="创建日期"
        />
        <el-table-column
          prop="updateTime"
          label="更新日期"
          width="120"
        />
        <el-table-column
          prop="status"
          label="有效状态"
          width="100"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '00'">有效</el-tag>
            <el-tag v-if="scope.row.status === '01'" type="info">无效</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="280"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>
          <!-- 点击删除按钮提示框 -->

        </el-table-column>
      </el-table>
      <el-row>
        <el-col>
          <el-pagination
            layout="prev, pager, next"
            :total="totalSize"
            @current-change="handleChangePage"
          />
        </el-col>
      </el-row>
      <el-dialog
        title="提示"
        :visible.sync="deleteVisible"
        width="30%"
        :before-close="handleCloseDelete"
      >
        <span>确认删除本条数据？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirmDelete">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { DateModel } from '@/utils/date.js'
import { getCombinationLabelList, getCombinationLabelDelete } from '@/api/coupon/label'
export default {
  name: 'LabelList',
  data() {
    return {
      search: {},
      deleteVisible: false,
      deleteNumber: '',
      combinationLabelList: [],
      couponList: [],
      labelListLoading: false,
      /**
       * 分页数据
       */
      pageNum: 1,
      pageSize: 10,
      name: '',
      createStartDate: '',
      createEndDate: '',
      totalSize: 0,
      // 删除id
      deleteId: ''
    }
  },
  created() {
    this.setDefaultDate()
    this.getLabelList()
  },
  methods: {
    /**
     * 获取标签列表
     */
    async getLabelList() {
      const { name, pageNum, pageSize, createStartDate, createEndDate } = this
      const queryParamMap = {}
      if (name) {
        queryParamMap.name = name
      }
      if (createStartDate) {
        queryParamMap.createStartDate = createStartDate
      }
      if (createEndDate) {
        queryParamMap.createEndDate = createEndDate + ' 23:59:59'
      }
      const requestData = {
        pageNum,
        pageSize,
        queryParamMap
      }
      this.labelListLoading = true
      setTimeout(() => {
        this.labelListLoading = false
      }, 5000)
      const labelListRes = await getCombinationLabelList(requestData)
      console.log(labelListRes)
      this.combinationLabelList = labelListRes.content
      this.totalSize = labelListRes.totalSize
      this.labelListLoading = false
    },
    handleChangePage(page) {
      this.pageNum = page
      this.getLabelList()
    },
    /**
     * 设置表头和表格内容居中
     */
    rowStyle() {
      return 'text-align: center'
    },
    headerStyle() {
      return 'text-align: center'
    },
    // 确认搜索
    handleSearch() {
      this.pageNum = 1
      this.getLabelList()
    },
    setDefaultDate() {
      const curDate = DateModel.getCurDate()
      this.startDate = ''
      this.endDate = curDate
    },
    /**
     * 对表格执行 编辑 查看 删除 操作
     */
    handleEdit(row) {
      this.$router.push({
        name: 'Label',
        params: {
          editType: '02',
          ...row
        }
      })
    },
    handleView(row) {
      console.log(row)
    },
    handleDelete(row) {
      this.deleteId = row.labelId
      this.deleteVisible = true
    },

    handleCloseDelete() {
      this.deleteVisible = false
    },
    async handleConfirmDelete(id) {
      const data = {
        labelIds: [this.deleteId]
      }
      console.log('delete combinationLabel')
      const deleteRes = await getCombinationLabelDelete(data)
      console.log(deleteRes, 'deleteRes')
      this.$message({
        message: '删除成功',
        type: 'success'
      })
      /**
       * 删除成功之后
       * 重新请求数据
       * 如果当前页码大于1，则让页面减一
       * 否则不变，请求数据
       */
      if (this.pageNum > 1 && this.combinationLabelList.length < 0) {
        this.pageNum--
      }
      this.handleCloseDelete()
      this.getLabelList()
    },
    handleAdd() {
      this.$router.push('/coupon/label')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .search{
    .search-content{
      width: 100%;
      border-radius: 6px;
      background: #ffffff;
      padding-top: 10px;
      padding-bottom: 10px;
      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
      .gap{
        color: #333;
        margin: 0 10px;
      }
    }
  }
  .list-wrapper{
    width: 100%;
    min-height: 90px;
    border-radius: 6px;
    background: #ffffff;
    margin-top: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    .grid-content{
      &.title{
        font-weight: 600;
      }
    }
  }
</style>
